import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { Menu, Layout } from "antd";
import { connect } from "dva";
// import Icon from "@cbd/icon";
import qudao from '../../assets/menu-icons/qdgl.png';
import muban from '../../assets/menu-icons/mbgl.png';
import jszgl from '../../assets/menu-icons/tsmugl.png';
import fsrwpz from '../../assets/menu-icons/fsrwpz.png';
import jiankong from '../../assets/menu-icons/jkgl.png';
import xxygl from '../../assets/menu-icons/xxygl.png';
import wdxx from '../../assets/menu-icons/xxgl.png';
import grxxgl from '../../assets/menu-icons/dbsx.png';

import duanxin from '../../assets/icons/icon-duanxin.png';
import czrz from '../../assets/menu-icons/czrz.png';
import styles from "./index.less";

const { Sider } = Layout;
const { SubMenu } = Menu;

// const IconsOfMenu = {
//   'xxgl-2': <img src={xiaoxi} width={16} />,
//   'qdgl-2': <img src={qudao} width={16} />,
//   '34-dxpegl': <img src={duanxin} width={16} />,
//   'mbgl-2': <img src={muban} width={16} />,
//   'jkgl-2': <img src={jiankong} width={14} />,
//   'tsmugl': <img src={tsmugl} width={14} />,
//   'czrz-3': <img src={czrz} width={14} />,
//   'dbsx-3': <img src={dbsx} width={14} />,
// };

const IconsOfMenu = {
  '1qdgl-2': <img src={qudao} width={16} />,
  '2mbgl-2': <img src={muban} width={16} />,
  '3jszgl-2': <img src={jszgl} width={16} />,
  '4fsrwpz-2': <img src={fsrwpz} width={16} />,
  '5xxfsjk-2': <img src={jiankong} width={16} />,
  '6xxygl-2': <img src={xxygl} width={16} />,

  '1wdxx-2': <img src={wdxx} width={16} />,
  '2grxxgl-2': <img src={grxxgl} width={16} />,
  '1rzgl-2': <img src={muban} width={16} />,

  '34-dxpegl': <img src={duanxin} width={16} />,
  '4tsmbgl-2': <img src={jszgl} width={14} />,
  '3rzgl-2': <img src={czrz} width={14} />,
  '2dbsx-2': <img src={grxxgl} width={14} />,
  
};

@withRouter
@connect(({ channelDictionaryModel }) => ({
  channelsTypesData: channelDictionaryModel.channelsTypesData,
}))
class BaseMenu extends Component {
  state = {
    openKeys: [],
    selectedKeys: []
  };

  componentDidMount() {
    this.init();
  }

  init = () => {
    const { data = [], dispatch } = this.props;
    this.tm = setTimeout(() => {
      const { defaultOpenKeys: openKeys, defaultSelectedKeys: selectedKeys } =
        this.getSelectMenu(data) || {};
      this.setState({
        openKeys,
        selectedKeys
      });
    }, 100);
    // 获取渠道类型
    dispatch({
      type: 'channelDictionaryModel/channelsTypes'
    });
  };

  componentDidUpdate(prevProps) {
    const { data, location: { pathname = "" } = {} } = this.props;
    const { data: predata, location: { pathname: prepathname = "" } = {} } = prevProps;
    if (predata !== data || pathname !== prepathname) {
      this.init();
    }
  }

  componentWillUnmount() {
    clearTimeout(this.tm);
  }

  getSelectMenu = (arr = [], parent = "") => {
    const { location: { pathname = "" } = {} } = this.props;

    if (!Array.isArray(arr)) {
      return null;
    }
    for (let i = 0; i < arr.length; i += 1) {
      if (arr[i].children) {
        this.getSelectMenu(arr[i].children, arr[i].key);
      } else if (pathname.includes(arr[i].url)) {
        this.defaultSelectedKeys = [arr[i].key];
        this.defaultOpenKeys = [parent];
      }
    }
    return {
      defaultSelectedKeys: this.defaultSelectedKeys,
      defaultOpenKeys: this.defaultOpenKeys
    };
  };

  onOpenChange = openKeys => {
    const { data = [] } = this.props;
    const { openKeys: prevKeys = [] } = this.state;
    const rootSubmenuKeys = data.map(item => item.key);
    const latestOpenKey = openKeys.find(key => prevKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : []
      });
    }
  };

  renderMenu = data => {
    const { channelsTypesData } = this.props;
    // 判断是否展示钉钉群菜单
    const showDingQun = channelsTypesData.findIndex(d => Number(d.value) === 12) !== -1;

    if (!Array.isArray(data)) {
      return null;
    }
    return data.map(({ key, url, children, name }) => {
      if (children) {
        return (
          <SubMenu
            key={key}
            title={
              <React.Fragment>
                {IconsOfMenu[key]}
                <span style={{ marginLeft: '15px' }}>{name}</span>
              </React.Fragment>
            }
          >
            {this.renderMenu(children)}
          </SubMenu>
        );
      }
      if (name === '钉钉企业群管理' && !showDingQun) {
        return null;
      }
      return (
        <Menu.Item
          key={key}
          onClick={() => {
            this.setState({
              selectedKeys: [key]
            });
          }}
        >
          <Link to={`/${url}`}>
            {IconsOfMenu[key]}
            <span style={{ marginLeft: '18px' }}>{name}</span>
          </Link>
        </Menu.Item>
      );
    });
  }

  render() {
    const { collapsed, data = [] } = this.props;
    const { openKeys, selectedKeys } = this.state;
    // const showCollapse = menuType !== "帮助文档";
    return (
      <Sider collapsed={collapsed}>
        <div className={styles.rootw}>
          {/* {showCollapse && <div className={styles.collapsedBox}>
            <Icon
              className={styles.trigger}
              type={this.props.collapsed ? "right" : "left"}
              onClick={this.props.onCollapse}
            />
          </div>} */}
          <div className={styles.collapsedDiv} onClick={this.props.onCollapse}>
            <div className={styles.menuIcon} />
          </div>
          {collapsed ? <Menu
            mode="inline"
            theme="dark"
            selectedKeys={selectedKeys}
            // openKeys={openKeys}
            onOpenChange={this.onOpenChange}
          >
            {this.renderMenu(data)}
          </Menu> : <Menu
            mode="inline"
            theme="dark"
            selectedKeys={selectedKeys}
            openKeys={openKeys}
            onOpenChange={this.onOpenChange}
          >
              {this.renderMenu(data)}
            </Menu>}
        </div>
      </Sider>
    );
  }
}

export default BaseMenu;
